<style lang="less" scoped>
    @import '../styles/menu.less';
</style>

<template>
    <Menu ref="topMenu" mode="horizontal" :active-name="activeName"  @on-select="changeMenu">
        <template v-for="item in moduleMenuList">
            <MenuItem :name="item.name" :key="item.name">
                {{ item.title }}
            </MenuItem>
        </template>
    </Menu>
</template>

<script>
    export default {
        name: 'topMenu',
        props: {
            moduleMenuList: {
                type: Array,
                required: true
            },
            iconSize: Number,
        },
        mounted () {

        },

        computed: {
            activeName() {
                return this.$store.state.app.currentModuleName;
            }
        },

        methods: {
            changeMenu (active) {
                this.$emit('on-change', active);
            },

            itemTitle (item) {
                if (typeof item.title === 'object') {
                    return this.$t(item.title.i18n);
                } else {
                    return item.title;
                }
            }
        }
    };
</script>
